<template>
	<view class="page_body grey_bg">

		<mescroll-body ref="mescrollRef" top="1px" @init="mescrollInit" :up="upOptions" :down="upOptions">

			<!-- 状态栏 -->
			<view class="status_bar"></view>

			<!-- 导航栏 -->
			<u-navbar title="" :autoBack="true" title=" ">
				<view slot="center" style="width: calc(100% - 50px);margin-left: 25px;">
					<u-search v-model="form.tempKeyword" :clearabled="true" :showAction="true" actionText="搜索"
							placeholder="请输入关键词" @change="keyChange" @search="initSearch" @custom="initSearch">
					</u-search>
				</view>
			</u-navbar>


			<!-- tabs标签组件 -->
			<u-tabs v-if="form.keyword" style="border-top: #efefef  solid 1px;background-color: #ffffff;margin-top: 44px;" :current="currentTab"
				:list="tabsList" @click="tabsClick" :scrollable="false" :activeStyle="{color: '#01B4FE',fontWeight: 'bold',transform: 'scale(1.05)'}">
			</u-tabs>


			<view style="height: 1px;"></view>


			<!-- 数据列表 -->
			<swiper  v-if="form.keyword" :style="{height: wHeight + 'px'}" :current="currentTab" @change="swiperChange">

				<swiper-item>
					<search-all-list ref="allList" :height="wHeight" :keyword="form.keyword" @moreTopic="tabsClick({index:1})"
									@video_play="videoPlayBack">
					</search-all-list>
				</swiper-item>


				<swiper-item>
					<!-- 话题 -->
					<search-topic-list ref="topicList" :height="wHeight" :keyword="form.keyword"
										@countBack="dataCountBack">
					</search-topic-list>
				</swiper-item>

				<swiper-item>
					<!-- 文章 -->
					<search-article-list ref="articleList" :height="wHeight" :keyword="form.keyword"
										@video_play="videoPlayBack" @countBack="dataCountBack">
					</search-article-list>
				</swiper-item>


				<swiper-item>
					<userList ref="userListz" :height="wHeight"  :keyword="form.keyword" @countBack="dataCountBack">

					</userList>
				</swiper-item>

			</swiper>


			<!-- 未搜索 -->
			<no-data v-if="!form.keyword" :height="wHeight + 40" icon="/static/bg/cat_jy.png" :iconMarginTop="100"
					 style="margin-top: 44px;" show-text="" icon-height="200" icon-width="200">
			</no-data>


		</mescroll-body>


		<!-- 视频播放 -->
		<video-play ref="play"></video-play>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import SearchAllList from './cpns/searchAllList.vue'
	import SearchArticleList from './cpns/searchArticleList.vue'
	import SearchTopicList from './cpns/searchTopicList.vue'
	import userList from './cpns/searchUserList.vue'
	import NoData from "@/components/noTips/noData.vue"
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		components: {
			SearchAllList,
			SearchTopicList,
			SearchArticleList,
			userList,
			NoData,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				upOptions: {
					// 是否启用下拉刷新
					use: false
				},
				// 页面高度
				wHeight: 600,
				// 当前菜单索引
				currentTab: 0,
				// 搜索关键词
				form: {
					keyword: '',
					tempKeyword: ''
				},
				tabsList: [{
					id: 1,
					name: '综合'
				}, {
					id: 2,
					name: '话题',
					badge: {
						value: 0,
						type: 'info',
						inverted: true
					}
				}, {
					id: 3,
					name: '帖子',
					badge: {
						value: 0,
						type: 'info',
						inverted: true
					}
				}, {
					id: 4,
					name: '用户',
					badge: {
						value: 0,
						type: 'info',
						inverted: true
					}
				}],
			}
		},
		created() {
			// 获取页面高度
			this.wHeight = uni.getSystemInfoSync().windowHeight -90
		},
		methods: {
			// 初始化搜索
			initSearch(v){
				this.form.keyword = v
				if(!v){
					return
				}
				this.currentTab = 0
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll()
					if (ref){
						ref.initData()
					}

				})
			},
			// 输入框变化
			keyChange(v){
				if(!v){
					this.form.keyword = v
				}
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			// 总条数
			dataCountBack(index,count){
				this.tabsList[index].badge.value = count
			},
			setBadge(){
				for (let i = 1; i < this.tabsList.length; i++) {
					this.tabsList[i].badge.type = this.currentTab===i?'primary':'info'
				}
			},
			// swiper切换
			swiperChange(e) {
				this.currentTab = e.detail.current
				this.$nextTick(()=>{
					this.setBadge()
					let ref = this.getSwiperItemScroll()
					if (ref){
						ref.initData()
					}

				})
			},
			// tabs点击事件
			tabsClick(e) {
				this.currentTab = e.index
			},
			// 获取指定下标的ref对象
			getSwiperItemScroll(i){
				if(this.currentTab == 0){
					 return this.$refs.allList
				}else if(this.currentTab == 1){
					return this.$refs.topicList
				}else if(this.currentTab == 2){
					return this.$refs.articleList
				}else if(this.currentTab == 3){
					return this.$refs.userListz
				}
				return null
			},


		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input {
		padding: 2px 7px !important;
	}
	::v-deep .u-badge--not-dot {
		padding: 2px 0 !important;
	}

</style>
